<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
</head>
<body>

   
    <!--头部-->
    <span id="header"></span>

    <div class="auth-main clearfix" >
      
        <!--内容区域-->
        <div  class="main main-width-mid" style="margin-left:100px">
            <div class="ibox-title">
                <h5 style="color: #666">支付订单</h5>
            </div>

            <div class="ibox-content m-t-sm clearfix" style="height: 80px;">
                <div class="m-timeline">
                <div class="line">
                    <div class="dot"></div>
                    <div class="dot" style="left: 12.5%;"></div>
                    <div class="dot" style="left: 25%;"></div>
                    <div class="dot" style="left: 37.5%;"></div>
                    <div class="dot active" style="left: 50%;"></div>
                    <div class="dot" style="left: 62.5%;"></div>
                    <div class="dot" style="left: 75%;"></div>
                    <div class="dot" style="left: 87.5%;"></div>
                    <div class="dot" style="right: 0"></div>

                    <span style="left:-1%;">确认订单</span>
                    <span style="left: 10%;">卖家确认订单</span>
                    <span style="left: 23.5%;">买家付款</span>
                    <span style="left: 36%;">卖家发货</span>
                    <span style="left: 47.5%;">买家确认收货</span>
                    <span style="left: 60%;">卖家邮寄发票</span>
                    <span style="left: 72.5%;">买家确认发票</span>
                    <span style="left: 86%;">交易成功</span>
                    <span style="right:-1.5%;">确认订单</span>
                </div>
            </div>
            </div>

            <div class="ibox-content">
                <table class="table table-bordered table-input u-table-center">
                    <tbody>
                    <tr>
                        <th style="width: 180px;">买方</th>
                        <td><input type="text" value="XXX公司" class="form-control" readonly></td>
                        <th style="width: 180px;">卖方</th>
                        <td><input type="text" value="上海科技公司" class="form-control" readonly></td>
                    </tr>
                    <tr>
                        <th>开户银行</th>
                        <td><input type="text" value="北京银行" class="form-control" readonly></td>
                        <th>开户银行</th>
                        <td><input type="text" value="中国银行" class="form-control" readonly></td>
                    </tr>
                    <tr>
                        <th>账户</th>
                        <td><input type="text" value="621700287000****987" class="form-control" readonly></td>
                        <th>账户</th>
                        <td><input type="text" value="621700287000****911" class="form-control" readonly></td>
                    </tr>
                    <tr>
                        <th>地址</th>
                        <td><input type="text" value="XXXXXXXXXX" class="form-control" readonly></td>
                        <th>地址</th>
                        <td><input type="text" value="上海市浦东新区" class="form-control" readonly></td>
                    </tr>
                    <tr>
                        <th>电话</th>
                        <td><input type="text" value="XXXXXXXXXXXX" class="form-control" readonly></td>
                        <th>电话</th>
                        <td><input type="text" value="021-52734278" class="form-control" readonly></td>
                    </tr>
                    <tr>
                        <th>交易员</th>
                        <td><input type="text" value="XXXXX" class="form-control" readonly></td>
                        <th>交易员</th>
                        <td><input type="text" value="王林" class="form-control" readonly></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="ibox-title">
                <h5 style="color: #c2343a;">付款方式:</h5>
            </div>

            <div class="ibox-title m-select-btn" style="margin-top: 0">
                <a class="active m-l-md m-r" href="javascript:;">公司网银</a>
                <a class="m-r" href="javascript:;">承兑汇票</a>
                <a href="javascript:;">账户余额</a>
            </div>

            <div id="bankList" class="ibox-content m-bank-list" style="padding-left:135px">
            	
            	
            		
                <div class="form-group">
                    <label class="m-radio-con">
                    	<span class="m-r-md">银行:</span>
                        <i class="iconfont icon-danxuanhongse"></i>
                        <input type="radio" name="bank" checked>
                        <img src="" />
                    </label>
                </div>
                <div class="form-group">
                    <label class="m-radio-con">
                        <i class="iconfont icon-danxuanhuise"></i>
                        <input type="radio" name="bank">
                        <img src="" />
                    </label>
                </div>
                <div class="form-group">
                    <label class="m-radio-con">
                        <i class="iconfont icon-danxuanhuise"></i>
                        <input type="radio" name="bank">
                        <img src="" />
                    </label>
                </div>

                <a class="other-bank pull-right" href="javascript:;">选择其他<i class="iconfont icon-xialaxuanxiang" style="position: relative;bottom:-3px;font-size: 20px;"></i></a>


               
                <div style="margin-left:55px">
                	  
                	 <a href="采购订单.html" type="button" class=" btn btn-danger" style="width: 120px; height: 34px; margin-right: 10px">下一步</a>
         
                </div>

          </div>

            <div style="display: none" id="draft" class="ibox-content m-draft">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">票据单号:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" placeholder="请输入票据单号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">上传票据:</label>
                        <div class="col-sm-8">
                            <div class="m-inputicon">
                                <i class="fa fa-plus"></i>
                                <input type="file">
                            </div>
                        </div>
                    </div>
		
		
		
                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-8">
                            <a type="button" class="btn btn-danger huiPiaoTip" style="width: 120px; height: 34px; margin-right: 10px">提交</a>
                        </div>
                    </div>
                </div>
            </div>

            <div style="display: none" id="banlance" class="ibox-content m-banlance">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">可用余额:</label>
                        <div class="col-sm-2">
                            <span type="text" class="form-control" style="border: none; color: #FF5A5F; font-size: 14px">100000.00</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">支付金额:</label>
                        <div class="col-sm-2">
                            <span type="text" class="form-control" style="border: none; color: #FF5A5F; font-size: 14px">80050.00</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">支付密码:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" value="" placeholder="请输入支付密码">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-8">
                            <a type="button" class="btn btn-danger" style="width: 120px; height: 36px; margin-right: 10px">确定</a>
                            <a type="button" class="btn btn-danger btn-outline" style="width: 120px; height: 36px; margin-right: 10px">取消</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


	<div id="huiPiao"></div>
    <!--页尾-->
    <span id="footer"></span>
  </body></html>
<script src="../common/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../common/js/pop.js" ></script>
<script type="text/javascript">
    $.get('../common/html/head.html', function (data) {
        $('head').html(data)
    });

    $.get('../common/html/header.html', function (data) {
        $('#header').html(data)
    });

    $.get('../common/html/nav.html', function (data) {
        $('#nav').html(data)
    });

    $.get('../common/html/footer.html', function (data) {
        $('#footer').html(data)
    });
</script>
<script>
    // 显示公司网银支付
    $('.m-select-btn a').eq(0).click(function () {
        $('#bankList').show(300);
        $('#draft').hide(300);
        $('#banlance').hide(300);
        $(this).addClass('active').siblings().removeClass('active');
    });

    // 显示汇票支付
    $('.m-select-btn a').eq(1).click(function () {
        $('#bankList').hide(300);
        $('#draft').show(300);
        $('#banlance').hide(300);
        $(this).addClass('active').siblings().removeClass('active');
        
        
        
        
        
    });

    // 显示余额支付
    $('.m-select-btn a').eq(2).click(function () {
        $('#bankList').hide(300);
        $('#draft').hide(300);
        $('#banlance').show(300);
        $(this).addClass('active').siblings().removeClass('active');
    });

    // 单选按钮切换
    $('.m-radio-con').on('click', 'input',function () {
        var $radio = $(this);

        $radio.on('change', function () {
            var flag = $radio.prop('checked');
            console.log(flag);
            if (flag) {
                $('input[type=radio]', '.m-radio-con').prev('.iconfont').removeClass('icon-danxuanhongse').addClass('icon-danxuanhuise');
                $radio.prev('.iconfont').removeClass('icon-danxuanhuise').addClass('icon-danxuanhongse');
            }
        })
    });

    $('.m-inputicon').on('click', function () {
        $('input', $(this)).click();
    })
</script>